<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo"></Header>
      <List v-show="todoList.length" :todoList="todoList" :updateTodo="updateTodo" :deleteTodo="deleteTodo"></List>
      <Footer v-show="todoList.length" :allTotal="allTotal" :doneTotal="doneTotal" :updateAll="updateAll" :deleteAllDone="deleteAllDone"></Footer>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import List from "./components/List.vue";
import Footer from "./components/Footer.vue";
export default {
  data() {
    return {
      todoList: [
        {
          id: 1,
          todoName: "吃饭",
          isDone: true,
        },
        {
          id: 2,
          todoName: "睡觉",
          isDone: false,
        },
        {
          id: 3,
          todoName: "玩手机",
          isDone: false,
        },
      ]
    };
  },
  methods: {
    addTodo(todoName) {
      //进行判断索引的长度
      let id = this.todoList.length
        ? this.todoList[this.todoList.length - 1].id + 1
        : 1;
      const todo = {
        todoName,
        isDone: false,
        id,
      };
      this.todoList.push(todo);
    },
    //更新
    updateTodo(id){
      this.todoList.forEach(item=>{
        if(item.id === id){
          item.isDone = !item.isDone
        }
      })
    },
    //设置删除
    deleteTodo(id){
      // console.log(id);
      this.todoList = this.todoList.filter((item)=>{
        return item.id !== id
      })
    },
    //全部更新
    updateAll(result){
      this.todoList.forEach(item=>{
        item.isDone = result
      })
    },
    //设置全部删除
    deleteAllDone(){
      this.todoList = this.todoList.filter(item=>!item.isDone)
    }
  },
  //计算属性
  computed:{
    //总共计数
    allTotal(){
      return this.todoList.length
    },
    //完成总计
    doneTotal(){
      return this.todoList.filter(item=>item.isDone).length
    }
  },
  //注册
  components: {
    Header,
    List,
    Footer,
  },
};
</script>


<style>
  /*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
